<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dynamic Data Table</title>
        <link rel="stylesheet" href="bootstrap.min.css">
        <style>
            .delete-all-loading {
                display: none;
                width: 1.5rem;
                height: 1.5rem;
                vertical-align: text-bottom;
                border: .25em solid currentColor;
                border-right-color: transparent;
                border-radius: 50%;
                -webkit-animation: spinner-border .75s linear infinite;
                animation: spinner-border .75s linear infinite
            }

            .cre-all-loading {
                display: none;
                width: 1.5rem;
                height: 1.5rem;
                vertical-align: text-bottom;
                border: .25em solid currentColor;
                border-right-color: transparent;
                border-radius: 50%;
                -webkit-animation: spinner-border .75s linear infinite;
                animation: spinner-border .75s linear infinite
            }

            .nowrap {
                white-space: nowrap;
            }
        </style>
    </head>

    <body>
        <div class="container-fluid">
            <div class="row" style="margin: 10px;">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">国家</span>
                    </div>

                    <select name="countryCode" id="country_code" class="form-control">
                        <option text="us" value="us"> 美国(US) </option>
                        <option text="hk" value="hk"> 香港(HK) </option>
                        <option text="jp" value="jp"> 日本(JP) </option>
                        <option text="de" value="de"> 德国(DE) </option>
                        <option text="fr" value="fr"> 法国(FR) </option>
                        <option text="gb" value="gb"> 英国(GB) </option>
                        <option text="ca" value="ca"> 加拿大(CA) </option>
                        <option text="nz" value="nz"> 新西兰(NZ) </option>
                        <option text="au" value="au"> 澳大利亚(AU) </option>
                        <option text="gt" value="gt"> 危地马拉(GT) </option>
                        <option text="gr" value="gr"> 希腊(GR) </option>
                    </select>

                    <div class="input-group-prepend">
                        <span class="input-group-text">州/省</span>
                    </div>
                    <select name="countryRegion" id="country_region" class="form-control">
                        <option text="" value=""> --空-- </option>
                        <option text="california" value="california"> 加利福尼亚州 </option>
                        <option text="florida" value="florida"> 佛罗里达 </option>
                        <option text="newyork" value="newyork"> 纽约 </option>
                        <option text="pennsylvania" value="pennsylvania"> 宾夕法尼亚州 </option>
                        <option text="texas" value="texas"> 德克萨斯州 </option>
                        <option text="attica" value="attica">希腊首都雅典(attica)</option>
                    </select>

                    <div class="input-group-prepend">
                        <span class="input-group-text">县/城</span>
                    </div>
                    <input type="text" id="input_city" class="form-control" aria-label="Sizing example input"
                        aria-describedby="inputGroup-sizing-default" value="" placeholder="比如:texas">
                </div>
                <br />
                <div class="delete-all">
                    <a href="#" class="delete-all-btn">关闭并删除全部</a>
                    <div class="delete-all-loading" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>

                <!--  <div style="margin-left: 20px;"> -->
                <!--  		  			  <a href="#" class="cre-all-btn">批量创建</a> -->
                <!--  		  			  <div class="cre-all-loading" role="status"> -->
                <!--  		  								  <span class="sr-only">Loading...</span> -->
                <!--  		  			  </div> -->
                <!--  		  </div> -->
            </div>
            <div class="row">
                <table class="table table-hover text-nowrap table-bordered" id="dataTable"
                    style="padding: 0px,20px,20px,20px">
                    <thead>
                        <tr>
                            <th>
                                端口
                            </th>
                            <th>
                                编号
                            </th>
                            <th>
                                代理类型
                            </th>
                            <th>
                                代理
                            </th>
                            <th colspan="2">
                                环境
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>

        <script src="jquery-3.5.1.min.js"></script>
        <script src="countryMap.js"></script>
        <script src="popup.js"></script>
    </body>

</html>